<template>
    <div>
        <el-card class="box-card" style="width:80%;margin:20px auto">
            <div slot="header" class="clearfix">
                <el-button type="primary" @click="addItem">添加巡检项</el-button>
            </div>
            <el-container>
                <el-aside width="230px">
                    <el-card class="box-card" style="width: 230px">
                        <div class="text item">
                            <div class="tree-container" style="overflow: auto !important;height: 510px">
                                <el-tree :data="data" :default-expand-all="true" :props="defaultProps" @node-click="handleNodeClick" class="tree" highlight-current>
                                <span class="custom-tree-node" slot-scope="{node, data}">
                                    <span>
                                        <img class="my-icon" v-if="hasChildren(node)" src="../../../assets/img/dir.svg" alt=""/>
                                        <img class="my-icon" v-else src="../../../assets/img/file.svg" alt=""/>
                                        <span>{{node.label}}</span>
                                    </span>
                                </span>
                                </el-tree>
                            </div>
                        </div>
                    </el-card>
                </el-aside>
                <el-container>
                    <el-header>
                        <el-card class="box-card" style="height: 550px">
                            <div class="text item">
                                <el-table :data="tableData" style="width: 100%" border>
                                    <el-table-column prop="name" label="巡检项内容" width="220" align="center"></el-table-column>
                                    <el-table-column prop="itemType" label="项目类型" width="120" align="center">
                                        <template slot-scope="scope">
                                            <div slot="reference" class="name-wrapper">
                                                <el-tag size="medium" style="color:#409EFF">{{scope.row.itemType | tranItemType}}</el-tag>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="optionalValue" label="可选值" width="120" align="center">
                                        <template slot-scope="scope">
                                            <div slot="reference" class="name-wrapper">
                                                <el-tag size="medium" v-if="val !== '无'" style="color:#67C23A;margin-left: 4px" v-for="val in scope.row.optionalValue.split(';')" :key="val" v-text="val"></el-tag>
                                                <el-tag size="medium" v-if="val === '无'" type="danger" style="margin-left: 4px" v-for="val in scope.row.optionalValue.split(';')" :key="val" v-text="val"></el-tag>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="isFeedback" label="是否反馈" width="120" align="center">
                                        <template slot-scope="scope">
                                            <el-switch v-model="scope.row.isFeedback" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="minValue" label="最小值" width="80" align="center"></el-table-column>
                                    <el-table-column prop="maxValue" label="最大值" width="80" align="center"></el-table-column>
                                    <el-table-column label="操作" fixed="right" header-align="center" align="center">
                                        <template slot-scope="scope">
                                            <el-button type="danger" size="small" @click="removeItem(scope.row.id)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-pagination style="margin-top: 80px" :current-page="1" :page-sizes="[10, 20, 50, 100]" :page-size="12" :total="1" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
                            </div>
                        </el-card>
                    </el-header>
                </el-container>
                <add-or-update ref="addOrUpdate" v-if="AddOrUpdateVisible" @refreshitem="getDataList"></add-or-update>
            </el-container>
            <slot name="button" :items="items"></slot>
        </el-card>
    </div>
</template>

<script>
    import AddOrUpdate from './item-add'

    export default {
        name: "item-list",
        components: {
            AddOrUpdate
        },
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                AddOrUpdateVisible: false,
                pointId: null,
                items: {},
                tableData: []
            }
        },
        methods: {
            handleNodeClick(data, node) {
                if (node.level === 1) {
                    this.pointId = data.id;
                }
                this.tableData = this.items[this.pointId];
            },
            hasChildren(node) {
                return node.level === 1;
            },
            getDataList(item) {
                console.log(item);
                if (this.items.hasOwnProperty(this.pointId)) {
                    this.items[this.pointId].push(item);
                } else {
                    this.items[this.pointId] = [item];
                }
                this.tableData = this.items[this.pointId];
            },
            addItem() {
                this.AddOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(this.pointId);
                });
            },
            removeItem(id) {
                for (let i = 0; i < this.tableData.length; i++) {
                    let item = this.tableData[i];
                    if (item.id === id) {
                        this.tableData.splice(i, 1);
                    }
                }
                this.showMessage('移除巡检项成功');
            }
        },
        props: {
            pointData: {
                type: Array,
                required: false
            }
        },
        filters: {
            tranItemType(type) {
                if (type === 1) return '状态型';
                if (type === 2) return '数值型';
                if (type === 3) return '文本型';
            }
        },
        activated() {
            this.data = this.pointData;
        }
    }
</script>

<style scoped>
    .my-icon {
        width: 17px;
        height: 17px;
    }

    /* 树形结构节点添加连线 */
    .tree /deep/ .el-tree-node {
        position: relative;
        padding-left: 16px;
    }

    .tree /deep/ .el-tree-node__children {
        padding-left: 16px;
    }

    .tree /deep/ .el-tree-node :last-child:before {
        height: 38px;
    }

    .tree /deep/ .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .tree /deep/ .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .tree /deep/ .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .tree /deep/ .el-tree-node__expand-icon.is-leaf {
        display: none;
    }

    .tree /deep/ .el-tree-node:before {
        border-left: 1px dashed #b8b9bb;
        bottom: 0;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .tree /deep/ .el-tree-node:after {
        border-top: 1px dashed #b8b9bb;
        height: 20px;
        top: 12px;
        width: 24px;
    }

    .treeLine /deep/ .el-tree-node[tabindex^="0"]:before {
        border-left: none !important;
    }

    .tree-container /deep/ .el-tree-node__expand-icon {
        display: none;
    }
</style>
